<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <style>
      body,html,div{ padding:0; margin:0;}
      body{
        line-height: 20px;
        background-color: #e1e1e1;
        font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB",STHeiti,sans-serif!important;
      }
      .top{
        width: 100%;
        height: 50px;
        background-color: #444;
      }
      .top-center{
        margin: auto;
        width: 90%;
        height: 100%;
      }
      .brand{
        width: 120px;
        margin: 5px 0 5px 0px;
        padding: 3px 20px;
        height: 34px;
        line-height: 34px;
        color: #ccc;
        font-weight: 700;
        display: block;
        float: left;
        margin-left: -20px;
        font-size: 20px;
        font-weight: 200;
        color: #777;
        text-shadow: 0 1px 0 #fff;
      }
      img{
        
        width: 120px;
        height: 28.19px;
      }
      .text-input{
        background: url(https://static2.cnodejs.org/public/images/search.e53b380a.hashed.png) 4px 4px no-repeat #888;
        padding: 3px 5px 3px 22px;
        color: #666;
        border: 0;
        margin-top: 12px;
        float: left;
        width: 206px;
        height: 20px;
        border-radius: 15px;
      }
      .top-text{
        cursor:pointer;
        float: right;
        margin-top: 15px;
        margin-right: 30px;
        position: relative;
        color: #ccc;
        font-size: 13px;
        text-shadow: none;
      }
      .main{
        margin: 15px auto 15px auto;
        width: 90%;
        max-width: 1400px;
        min-width: 960px;
        min-height: 400px;
        position: relative;
      }
      .left{
        margin-bottom: 15px;
        float: left;
        background-color: #ffffff;
        width: 1062px;
        height: 95%;
        
        

      }
      .right{
        
       
        float: right;
        background-color: #ffffff;
        width: 290px;
        height: 200px;
        
      }
      .left-top{
        height: 20px;
        background-color: #f6f6f6;
        padding: 10px;
      }
      .left-top-title{
        cursor:pointer;
        font-size: 14px;
        float: left;
        margin: 0 10px 0 10px;
        color: #80bd01;
      }
      .left-top-title-select{
        cursor:pointer;
        font-size: 14px;
        float: left;
        margin: auto 10px auto;
        background-color: #80bd01;
        color: #fff;
        padding: 3px 4px;
        border-radius: 3px;
      }
      .left-list{
        margin: 0;
      }
      .ceil{
        line-height: 2em;
        height: 30.13px;
        padding: 10px 10px 10px 10px;
        border-top: 1px solid #f0f0f0;
      }
      .user-avator-link{
        float: left;
      }
      .user-avator-img{
        width: 30px;
        height: 30px;
        border-radius: 3px;
      }
      .data{
        line-height: 2em;
        width: 70px;
        height: 30.13px;
        display: inline-block;
        text-align: center;
      }
      .data-first{
        line-height: 2em;
        color: #9e78c0;
        font-size: 14px;
      }
      .data-second{
        line-height: 2em;
        margin: 0 -3px;
        font-size: 10px;
      }
      .data-third{
        line-height: 2em;
        font-size: 10px;
        color: #b4b4b4;
      }
      .flag{
        margin: 0px 0;
        line-height: 2em;
        padding: 2px 4px;
        background-color: #80bd01;
        color: #fff;
        border-radius: 3px;
        font-size: 12px;
      }
      .title{
        display: inline;
      }
      .last{
        float: right;
        display: inline;
      }
      .last-img{
        height: 18px;
        width: 18px;
        vertical-align: middle;
        margin-right: .5em;
        border-radius: 3px;
      }
      .last-time{
        text-align: right;
        min-width: 50px;
        display: inline-block;
        white-space: nowrap;
        font-size: 11px;
        display: inline-block;
        /* margin-left: 20px; */
        color: #777;
      }
      .pagination{
        height: 40px;
        margin: 10px 0 0 10px;
      }
      .page{
        font-size: 14px;
        padding: 0px;
        width: 280px;
        height: 30px;
        margin: 0px 0px 0px 0px;

      } 
      .pagination .page li a{ 
        border-left-width: 1px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
        float: left;
        padding: 4px 12px;
        line-height: 20px;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-left-width: 0;
        color: #778087;
      }
      li{
        line-height: 2em;
        display: inline;
        text-align: -webkit-match-parent;
      }
      .footer{
        width: 100%;
        height: 180px;
        margin-top: 20px;
        clear: both;
        background: #fff;
      }
      .footer-main{
        width: 90%;
        max-width: 1400px;
        min-width: 960px;
        margin: 0 auto;
        color: #e2e2e2;
        padding: 20px 0;
        font-size: 13px;
        line-height: 2em;

      }
      .footer-fade p{
        color: #ababab;
        vertical-align: bottom;
      }
      p{
        font-size: 14px;
        margin: 0 0 10px;
      }
      .footer-fade p img{
        width: 92px;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        border: 0;
      }
      
      
    </style>
  </head>
  <body>
    <div class="top">
        <div class="top-center">
          <a class="brand" href="/">
        
            <img src="//static2.cnodejs.org/public/images/cnodejs_light.svg">
          
        </a>
          <form><input type="text" class="text-input"></form>
          <div class="top-text">登录</div>
          <div class="top-text">注册</div>
          <div class="top-text">关于</div>
          <div class="top-text">API</div>
          <div class="top-text">新手入门</div>
          <div class="top-text">首页</div>
        </div>
    </div>
    <div class="main">
        <div class="left">
            <div class="left-top">
              <div class="left-top-title left-top-title-select">全部</div>
              <div class="left-top-title">精华</div>
              <div class="left-top-title">分享</div>
              <div class="left-top-title">问答</div>
              <div class="left-top-title">招聘</div>
              <div class="left-top-title">客户端测试</div>
            </div>
            <div class="left-list" id="list">
              <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
              <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div> <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
               <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
              <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
              <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
              <div class="ceil">
                <a class="user-avator-link">
                  <img class="user-avator-img" src="https://avatars.githubusercontent.com/u/14975630?v=4&s=120">
                </a>
                <span class="data">
                  <span class="data-first">3</span>
                  <span class="data-second">/</span>
                  <span class="data-third">28783</span>
                </span>
                <span class="flag">置顶</span>
                <div class="title">精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div>
                <div class="last">
                  <img class="last-img" src="https://avatars1.githubusercontent.com/u/1207899?v=4&s=120">
                  <span class="last-time">3天前</span>
                </div>
              </div>
              
              <div class="pagination">
                <ul class="page">
                  <li class="disabled"><a>«</a></li>
                  <li class="disabled active"><a>1</a></li>
                  <li><a href="/">2</a></li>
                  <li><a href="/">3</a></li>
                  <li><a href="/">4</a></li>
                  <li><a href="/">5</a></li>
                  <li><a>...</a></li>
                  <li><a href="/">»</a></li>
                </ul>
              </div>
              
              
            </div>
            
        </div>
        <div class="right">

        </div>
    </div>
    <div class="footer">
        <div class="footer-main">
          <div class="footer-link">
            <a href="/" style="color: #666;">RSS</a>
            <a href="/" style="color: #666;">源码地址</a>
          </div>
          <div class="footer-fade">
            <p>CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。</p>
            <p>服务器搭建在<a href="https://www.digitalocean.com/?refcode=eba02656eeb3" target="_blank" class="sponsor_outlink" data-label="digitalocean">
              <a>
                <img src="//static2.cnodejs.org/public/images/digitalocean.png" title="digitalocean" alt="digitalocean" width="92px">
              </a>,存储赞助商为
              <a href="http://www.qiniu.com/?ref=cnode" target="_blank" class="sponsor_outlink" data-label="qiniu_bottom">
                <img src="//static2.cnodejs.org/public/images/qiniu.png" title="七牛云存储" alt="七牛云存储" width="115px">
              </a>
            </p>
            <p>新手搭建 Node.js 服务器，推荐使用无需备案的 
              <a href="https://www.digitalocean.com/?refcode=eba02656eeb3" style="text-decoration: none;color: #08c;">
                DigitalOcean(https://www.digitalocean.com/)
              </a>
            </p>
          </div>
        </div>
    </div>
    
    
  </body>
  <script>
    var doms=document.getElementsByClassName("left-top-title");
    for(var index=0;index<=doms.length;index++){
      var listin=doms[index].addEventListener("click",function(){

        var doms=document.getElementsByClassName("left-top-title-select");
        for(var j=0;j<doms.length;j++){
          
          doms[j].className="left-top-title";
        }
        var titles=document.getElementsByClassName("title");
        for(var j=0;j<titles.length;j++){
          titles[j].innerHTML=this.innerHTML;
        }
        this.className="left-top-title-select";

      })
    }
    window.onload=function(){
      var a=document.getElementsByClassName("ceil")[0];
      console.log(a);
      for(var i=0;i<10;i++){
      document.getElementById("list").innerHTML+="<div class='ceil'> <a class='user-avator-link'><img class='user-avator-img' src='https://avatars.githubusercontent.com/u/14975630?v=4&s=120'></a><span class='data'><span class='data-first'>3</span><span class='data-second'>/</span><span class='data-third'>28783</span></span><span class='flag'>置顶</span><div class='title'>精益求精，体验创心｜第十六届 D2 前端技术论坛「精心」而至</div><div class='last'><img class='last-img' src='https://avatars1.githubusercontent.com/u/1207899?v=4&s=120'><span class='last-time'>3天前</span></div></div>"
    }
    }
    
  </script>
</html>
